<template>
    <div class="app-container">
        <!--页头-->
        <div class="filter-container">
            <el-select v-model="listQuery.managerId" placeholder="请选择厅主" v-if="level===0" @change="managerChange">
                <el-option :label="item.username" :value="item.id" v-for="item in manageList" :key="item.id"></el-option>
            </el-select>
            <el-select placeholder="下拉框" v-model="listQuery.levelId">
                <el-option :label="'选项1'" :value="'1'"></el-option>
            </el-select>
            <el-input
                    :placeholder="'输入框'"
                    v-model="listQuery.accountName"
                    style="width: 200px;"
                    @keyup.enter.native="handleFilter"/>
            <el-button v-waves type="primary" icon="el-icon-search" @click="handleFilter">
                查询
            </el-button>
            <el-button v-waves type="primary" icon="reset" @click="resetCondition">
                <svg-icon icon-class="reset"/>
                重置
            </el-button>
            <el-button
                    style="margin-left: 10px;"
                    type="primary"
                    v-if="level!==0"
                    icon="el-icon-edit"
                    @click="handleCreate">新增
            </el-button>
        </div>

        <!--table主体-->
        <el-table
                v-loading="listLoading"
                ref="table"
                :key="tableKey"
                :data="list"
                border
                fit
                highlight-current-row
                style="width: 100%;"
        >
            <#list columns as c>
                <#if c.columnName != "managerId">
                    <el-table-column :label="'<#if c.msg?? && c.msg!="">${c.msg}</#if>'" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.${c.columnName} }}</span>
                        </template>
                    </el-table-column>
                </#if>
            </#list>
            <el-table-column :label="$t('table.actions')" width="200" align="center" fixed="right" v-if="level !== 0">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit')}}</el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">{{ $t('table.delete')}}</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页组件-->
        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="listQuery.page"
                :limit.sync="listQuery.limit"
                @pagination="getList"/>

        <!--弹框-->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form ref="dataForm" :rules="rules" :model="temp" label-width="80px">
                <#list columns as c>
                    <#if c.columnName != "managerId">
                        <el-form-item label="<#if c.msg?? && c.msg!="">${c.msg}</#if>" prop="${c.columnName}">
                            <el-input v-model="temp.${c.columnName}"></el-input>
                        </el-form-item>
                    </#if>
                </#list>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
                <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">{{ $t('table.confirm') }}
                </el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import { add, fetchList, modify, remove, see, getLevel, getBankList, getMangeList } from '@/api/${lowClassName}.js'
    import waves from '@/directive/waves'
    import Pagination from '@/components/Pagination'
    import AutoSelect from '@/components/AutoSelect'

    export default {
        name: '${className}',
        components: { Pagination, AutoSelect },
        directives: { waves },
        data() {
            return {
                tableKey: 0,
                manageList: [], // 厅主
                list: null, // 主体数据
                total: 0, // 总条数
                listLoading: true, // 是否加载中
                listQuery: { // 查询条件
                    page: 1,
                    limit: 10
                },
                temp: {},
                dialogFormVisible: false,

                dialogStatus: '', // 当前弹窗
                textMap: { //  弹窗类型
                    update: '修改',
                    create: '新增'
                },
                rules: {
                    prop: [
                        { required: true, message: '不能为空', trigger: 'blur' },
                        { pattern: /[0-9]$/, message: '只能输入数字', trigger: 'blur' }
                    ]
                },
                downloadLoading: false
            }
        },
        created() {
            this.getList()
            if (this.level === 0) {
                this.getMangeList()
            }
        },
        computed: {
            level: function () {
                return this.$store.getters.level
            }
        },
        methods: {
            // 重置搜索框
            resetCondition() {
                this.listQuery = { // 查询条件
                    page: 1,
                    limit: 10
                }
                this.getList()
            },
            // 删除
            handleDelete(row) {
                var id = row.id
                this.$confirm('是否确定删除？', '删除确认', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    remove(id).then((response) => {
                        if (response.success) {
                            this.getList()
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                        } else {
                            this.$message.error('删除失败!')
                        }
                    })
                })
            },
            // 获得数据
            getList() {
                this.listLoading = true
                fetchList(this.listQuery).then(response => {
                    this.list = response.rows
                    this.total = response.total
                    this.listLoading = false
                })
            },
            getMangeList() {
                getMangeList().then(rep => {
                    if (rep.success) {
                    this.manageList = rep.data
                    }
                })
            },
            // 查询
            handleFilter() {
                this.listQuery.page = 1
                this.getList()
            },
            // 创建页面
            handleCreate() {
                this.temp = {}
                this.dialogStatus = 'create'
                this.dialogFormVisible = true
            },
            // 创建
            createData() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        add(this.temp).then((response) => {
                            if (response.success) {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                })
                                this.dialogFormVisible = false
                                this.getList()
                            } else {
                                this.$message.error("添加失败")
                            }
                        })
                    } else {
                        console.log('验证不通过')
                    }
                })
            },
            // 更新页面
            handleUpdate(row) {
                this.listLoading = true
                this.dialogStatus = 'update'
                this.dialogFormVisible = true
                see(row.id).then(response => {
                    this.dialogFormVisible = true
                    this.temp = response.data

                    this.listLoading = false
                })
            },
            // 更新数据
            updateData() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        modify(this.temp).then((response) => {
                            if (response.success) {
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                })
                                this.dialogFormVisible = false
                                this.getList()
                            } else {
                            this.$message.error("修改失败")
                            }
                        })
                    }
                })
            },
            managerChange() {
                this.getList(this.listQuery.managerId)
            }
        }
    }

</script>
